<template>
    <div id="contianer">
        <div class="screen_model">
            <el-row :gutter="20">
                <el-col prop="msgTitle" :span="5">
                    <el-input
                        size="small"
                        v-model="searchForm.name"
                        placeholder="用户名"
                        clearable
                    ></el-input>
                </el-col>
                <el-col prop="appType" :span="5">
                    <el-button
                        type="primary"
                        @click="getRuleList()"
                        size="small"
                        >查询</el-button
                    >
                </el-col>
                <el-col
                    :span="4"
                    style="display: flex; justify-content: end; float: right"
                >
                    <el-button type="primary" @click="handleExport" size="small" v-if="isAdmin"
                        >导出</el-button
                    >
                    <el-button type="primary" @click="getRule" size="small"
                        >计算规则</el-button
                    >
                </el-col>
            </el-row>
        </div>
        <el-table :data="tableData" style="width: 100%" row-key="id" stripe v-loading="loading" :max-height="tableClientHeight">
            <el-table-column prop="rank" label="排名"></el-table-column>
            <el-table-column prop="uploadUser" label="用户名"> </el-table-column>
            <el-table-column prop="createBy" label="登录名"> </el-table-column>
            <!-- <el-table-column prop="name" label="部门"> </el-table-column>
            <el-table-column prop="name" label="岗位"> </el-table-column> -->
            <el-table-column prop="uploads" label="知识上传数量">
            </el-table-column>
            <el-table-column prop="views" label="文件总浏览量">
            </el-table-column>
            <el-table-column prop="likes" label="获点赞次数"> </el-table-column>
            <el-table-column prop="collects" label="获收藏次数">
            </el-table-column>
            <el-table-column prop="contributions" label="贡献值评价">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="total"
            background
            layout="total, prev, pager, next, jumper"
        >
        </el-pagination>

        <el-dialog
            title="计算规则"
            :visible.sync="informationVisible"
            :close-on-click-modal="false"
            width="1100px"
            center
        >
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
                <div class="ruleValue_box">
                    <!-- <span>贡献值 = 上传数量 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum1"
                        class="ruleValue"
                        type="number"
                    ></el-input> -->
                    <span> + 浏览量 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum2"
                        class="ruleValue"
                        type="number"
                    ></el-input>
                    <span>+ 点赞次数 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum3"
                        class="ruleValue"
                        type="number"
                    ></el-input>
                    <span>+ 收藏次数 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum4"
                        class="ruleValue"
                        type="number"
                    ></el-input>+
                    <span>质量案例 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum5"
                        class="ruleValue"
                        type="number"
                    ></el-input>+
                    
                </div>
                <div class="ruleValue_box">
                  
                    <span>技术标准 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum6"
                        class="ruleValue"
                        type="number"
                    ></el-input>
                    <span>+ 禁限用工艺 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum7"
                        class="ruleValue"
                        type="number"
                    ></el-input>
                    <span>+ 工艺操作指导书 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum8"
                        class="ruleValue"
                        type="number"
                    ></el-input>
                    <span>+ 培训视频 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum9"
                        class="ruleValue"
                        type="number"
                    ></el-input>
                    <span>+ 操作视频 *</span>
                    <el-input
                        v-model="ruleForm.ruleNum10"
                        class="ruleValue"
                        type="number"
                    ></el-input>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="informationConfirm"
                    >确 定</el-button
                >
                <el-button @click="informationClose">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      informationVisible: false,
      tableData: [],
      searchForm: {
        name: ''
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
      ruleForm: {},
      loading: false,
    }
  },
  computed: {
    isAdmin() {
      return this.$store.state.user.isAdmin;
    },
    tableClientHeight() {
      let tableClientHeight = document.documentElement.clientHeight || document.body.clientHeight
      tableClientHeight = tableClientHeight - 279
      return tableClientHeight
    }
  },
  mounted() {
    this.getRuleList()
  },
  methods: {
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getRuleList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getRuleList()
    },
    informationConfirm() {
      if (
        // this.ruleForm.ruleNum1 === '' ||
        this.ruleForm.ruleNum2 === '' ||
        this.ruleForm.ruleNum3 === '' ||
        this.ruleForm.ruleNum4 === '' ||
        this.ruleForm.ruleNum5 === '' ||
        this.ruleForm.ruleNum6 === '' ||
        this.ruleForm.ruleNum7 === '' ||
        this.ruleForm.ruleNum8 === '' ||
        this.ruleForm.ruleNum9 === '' ||
        this.ruleForm.ruleNum10 === ''
      ) {
        this.$message.warning('不能为空')
      } else {
        this.$http({
          url: '/contribution/saveRule',
          method: 'post',
          data: this.ruleForm
        }).then(({ data }) => {
          console.log(data.data, '查看保存信息')
          if (data.code == 200) {
            this.$message.success('保存成功')
            this.informationVisible = false
            this.getRuleList()
          }
        })
      }
    },
    getRule() {
      this.informationVisible = true
      this.$http({
        url: '/contribution/getRule',
        method: 'get'
      }).then(({ data }) => {
        if (data.code == 200) {
          this.ruleForm = data.data
        }
      })
    },
    informationClose() {
      this.informationVisible = false
    },
    getRuleList() {
      this.loading = true;
      this.$http({
        url: '/contribution/ruleList',
        method: 'get',
        params: {
          name: this.searchForm.name,
          pageNumber: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(({ data }) => {
        if (data.code == 200) {
          this.loading = false
          this.tableData = data.data.data
          this.total = data.data.totalSize
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$utils.download({
        url: "/contribution/exportRank",
        method: "get",
        defaultFileName: `贡献值排名_${new Date().getTime()}.xlsx`,
      });
    },
  }
}
</script>
<style lang='scss' scoped>
#contianer {
    width: 98%;
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin: 1%;
    float: left;

    .screen_model {
        margin-bottom: 20px;
    }

    .el-select {
        width: 100%;
    }
}
.ruleValue_box {
    display: flex;
    align-items: center;
    .ruleValue {
        width: 100px;
        margin: 5px;
    }
}
</style>
